<template>
  <div style="display: flex; flex-direction: column; padding: 10px 0;">
    <span
      v-for="(item, index) in tools"
      :key="index"
      class="parent-menu"
    >
      {{ item.label }}
      <span
        v-for="(item1, index1) in item.children"
        :key="index1"
        class="sub-menu"
        :class="{'sub-menu-active': selected === item1.id}"
        @click="handleClick(item1.path)"
      >
        {{ item1.label }}
      </span>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    selected: Number,
  },
  data() {
    return {
      tools: [
        {
          label: "首页",
          children: [
            {
              label: '我的',
              id: 0,
              path: '/userInfo'
            }
          ]
        },
        {
          label: "订单中心",
          children: [
            {
              label: "我的订单",
              id: 1,
              path: '/order'
            },
          ],
        },
        {
          label: "设置",
          children: [
            {
              label: "个人信息",
              id: 2,
              path: '/userSetting'
            },
            {
              label: "收货地址",
              id: 3,
              path: '/address'
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleClick(path) {
      this.$router.push({path: path})
    }
  },
};
</script>

<style scoped>
.parent-menu {
  font-size: 16px;
  font-weight: 800;
  color: #333333;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

.sub-menu {
  font-size: 14px;
  font-weight: 600;
  margin-top: 10px;
  color: #787777;
  cursor: pointer;
}

.sub-menu-active {
  color: #3271ae;
}
</style>